<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <title>星级评分</title>
  <style>

body ul li{
  margin: 0;
  padding: 0;
}

  .ratingitem{
    width: 32px;
    height: 32px;
    list-style-type: none;
    float: left;
    background: url('img/star.png') no-repeat;
    cursor: pointer;
  }

  .rating{margin: 100px auto;}
  </style>

</head>
<body>

  <ul class="rating">
    <li class="ratingitem" title="十分不好"></li>
    <li class="ratingitem" title="不好"></li>
    <li class="ratingitem" title="一般"> </li>
    <li class="ratingitem" title="好"></li>
    <li class="ratingitem" title="很好"></li>
  </ul>


    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
 var lightnum=2;
 lightOn(2);

 function lightOn(index){


   $('.rating').find('.ratingitem').each(function(){
     if($(this).index()<index){
       $(this).css("background-position","0 -40px");
     }else {
       $(this).css("background-position","0 0px");
     }
   });
 }

  $('.ratingitem').on('mouseover',function(){
     var index =$(this).index();
     lightOn(index+1);
  });


  $('.ratingitem').on('mouseout',function(){
       lightOn(lightnum);
  });


  var LightEntire=function(){

  }

    


    </script>
</body>
</html>
